<input #file type="file" (change)="newFileChoose(file)" style="display: none">

<div class="image-upload clearfix {{cssClass}}" reDroppable (onDrop)="onDropFiles($event)">
  <div *ngFor="let fileItem of uploadFiles" class="image-upload-item"
       [style.width]="previewWidth"
       [style.height]="previewHeight">

    <div class="image-upload-image-view">
      <div class="image-upload-toolbar">
        <i class="image-upload-toolbar-item image-upload-toolbar-view {{viewIcon}}"
           (click)="viewImage(fileItem)"></i>
        <i class="image-upload-toolbar-item image-upload-toolbar-remove {{removeIcon}}"
           (click)="onRemoveUploadFile(fileItem)"></i>
      </div>
      <div class="image-upload-item-info">
        <img class="preview-image img-responsive" [src]="fileItem.dataUrl"
             [attr.alt]="fileItem.file?.name">
      </div>
    </div>
  </div>
  <div class="image-upload-item image-upload-btn" [style.width]="previewWidth"
       [style.height]="previewHeight" (click)="addNewFile($event)" *ngIf="!isMoreThanMaxItems() || isUploading">
    <div class="image-upload-item-info">
      <i class="image-upload-btn-icon {{uploadBtnIcon()}}" [ngClass]="{'uploading': isUploading}"></i>
      <div class="image-upload-btn-text">{{uploadButton}}</div>
    </div>
  </div>
</div>

<hi-alert-box class="file-upload-error-box" type="danger" [closable]="true" (close)="clearErrors()"
              *ngIf="showErrors && errors.length">
  <ul>
    <li *ngFor="let error of errors">{{error}}</li>
  </ul>
</hi-alert-box>
